<template>
	<ul>
        <ul>
            <li :style="{opacity: opacity}">欢迎学习</li>
            <li>news001 <input type="text"></li>
            <li>news002 <input type="text"></li>
            <li>news003 <input type="text"></li>
        </ul>
	</ul>
</template>

<script>
	export default {
		name:'News',
        beforeDestroy() {
            console.log("news 销毁")
        },
        data() {
            return {
                opacity:1
            }
        },
        // 路由独有的生命周期
        activated() { // 组件激活的时候触发，  激活触发
            console.log('News组件被激活了')
            this.timer = setInterval(() => {
                console.log('@')
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        deactivated() { // 组件不要看了，看别的组件，调用， 失活调用
            console.log('News组件失活了')
            clearInterval(this.timer)
        },
    }
</script>